<script setup lang="ts">
import DlgUserCreateOrEdit from "./DlguserCreateOrEdit.vue";
import {reactive, ref} from "vue";
import {getUserList, userType} from "../../api/user.ts";

const dlgCreateOrEdit = ref<InstanceType<typeof DlgUserCreateOrEdit>>()

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})
const userData = ref<userType[]>(
    [] as userType[]
)
const getList = async () => {
  await getUserList().then(res => userData.value = res.data)
}

getList();
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户列表</span>
      </div>
      <div class="query">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="按照用户邮箱进行查询">
            <el-input v-model="formInline.user" placeholder="输入用户邮箱" clearable/>
          </el-form-item>
          <el-form-item label="按照用户名称进行查询">
            <el-input v-model="formInline.user" placeholder="输入用户名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table :data="userData" border style="width: 100%">
      <el-table-column prop="id" label="id"/>
      <el-table-column prop="name" label="用户昵称"/>
      <el-table-column prop="email" label="用户邮箱"/>
      <el-table-column prop="" label="表单操作">
        <el-button type="primary" link @click="() => dlgCreateOrEdit?.initAndShow(1)">编辑</el-button>
        <el-button type="danger" link>删除</el-button>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="100"/>
  </el-card>
  <dlg-user-create-or-edit ref="dlgCreateOrEdit"/>
</template>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: auto;
  display: flex;
  flex-direction: column;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

.query {
  margin-top: 20px;
}
</style>